<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .imgdiv {
            position: relative;
            width: 500px;
        }

        .imgdiv>img {
            width: 500px;
        }

        .yellow {
            display: none;
            width: 250px;
            height: 156px;
            background-color: yellow;
            opacity: .5;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .bigdiv {
            /* display: none; */
            position: absolute;
            top: 0px;
            left: 510px;
            width: 700px;
            height: 437.5px;
            overflow: hidden;

        }   
        .bigdiv img{
            margin-top: 0px;
            margin-left: 0px;
        }
    </style>
</head>

<body>

    <script>
        // 页面加载完毕
        window.addEventListener('load', function () {
            // 找到我们需要操作的图片
            var smallImg = document.querySelector('.small');

            // 找到最大的div
            var imgdiv = document.querySelector('.imgdiv');
            // 黄色遮挡狂
            var yellow = document.querySelector('.yellow');
            // 放大div
            var bigDiv = document.querySelector('.bigdiv');
            // enter  阻止事件冒泡
            imgdiv.addEventListener('mouseover', function () {
                // console.log(111);
                yellow.style.display = 'block';
                bigDiv.style.display = 'block';
            });

            // 鼠标移出
            imgdiv.addEventListener('mouseout', function () {
                // console.log(111);
                yellow.style.display = 'none';
                bigDiv.style.display = 'none';
            });

            // smallImg

            imgdiv.addEventListener('mousemove', function (e) {
                // console.log(e.pageX-imgdiv.offsetLeft);
                // console.log();

                var x = e.pageX - imgdiv.offsetLeft - 125;
                if (x < 0) { x = 0 }
                if (x > 250) { x = 250 }

                var y = e.pageY - imgdiv.offsetTop - 78;
                if (y < 0) { y = 0 }
                if (y > 156) {y = 156;}

                yellow.style.left = x + 'px';
                yellow.style.top = y + 'px';

                bigDiv.children[0].style.marginLeft=-(x*3.6)+'px';
                bigDiv.children[0].style.marginTop=-(y*3.6)+'px';
            });
        });
    </script>

    <div class="imgdiv">/
        <img src="1.jpg" class="small">
        <div class="yellow"></div>
        <div class="bigdiv">
            <img src="1.jpg" class="big">
        </div>
    </div>
</body>

</html>